<template>
  <el-container>
    <el-main>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>会议信息</el-breadcrumb-item>
      </el-breadcrumb>
      <!--          搜索框-->
      <div style="padding: 10px 0">
        <el-input
                suffix-icon="el-icon-user"
                class="ml-5"
                style="width: 200px"
                placeholder="请输入会议召开者"
                v-model="userName"
        ></el-input>
        <el-input
                suffix-icon="el-icon-location-information"
                class="ml-5"
                style="width: 200px"
                placeholder="请输入开会的地点"
                v-model="address"
        ></el-input>
        <el-button class="ml-5" type="primary" @click="load"> 搜索</el-button>
        <el-button class="ml-5" type="warning" @click="clear"> 重置</el-button>
      </div>

      <!--          表单-->
      <div style="margin: 10px 0">
        <el-popconfirm
                class="ml-5"
                confirm-button-text="确定"
                cancel-button-text="按错了!"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="delBatch"
        >
          <el-button type="primary" slot="reference"
          >批量删除<i class="el-icon-circle-plus-outline"></i
          ></el-button>
        </el-popconfirm>

        <el-button type="primary" @click="addMeeting" class="ml-5"
        >新建会议<i class="el-icon-circle-plus-outline"></i
        ></el-button>
        <el-button type="primary" @click="daochu"
        >导出为Excel<i class="el-icon-top-right"></i
        ></el-button>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="24px"></el-table-column>
        <el-table-column prop="meetingId" label="会议Id" width="80">
        </el-table-column>
        <el-table-column prop="userName" label="会议召开者" width="100">
        </el-table-column>
        <el-table-column prop="state" label="会议状态" width="80">
        </el-table-column>
        <el-table-column prop="conferenceTheme" label="会议主题" width="160">
        </el-table-column>
        <el-table-column prop="contentDescription" label="会议内容" width="200">
        </el-table-column>
        <el-table-column prop="address" label="会议地址" width="100">
        </el-table-column>
        <el-table-column prop="startTime" label="会议开始时间" width="160">
        </el-table-column>
        <el-table-column prop="endTime" label="会议结束时间" width="160">
        </el-table-column>
        <!--            操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" @click="handleEdit(scope.row)"
            >编辑<i class="el-icon-edit"></i
            ></el-button>
            <el-popconfirm
                    class="ml-5"
                    confirm-button-text="确定"
                    cancel-button-text="按错了!"
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定删除吗？"
                    @confirm="del(scope.row.meetingId)">
              <el-button type="danger" slot="reference"
              >删除<i class="el-icon-remove-outline"></i
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <!--            分页插件的基本参数-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >
        </el-pagination>
      </div>
      <!--          新建会议弹框-->
      <el-dialog title="会议信息" :visible.sync="outerVisible2" width="980px">
        <el-form size="mini" :inline="true" :model="form2" ref="form">
          <el-form-item label="申请人">
            <el-input v-model="form2.username"></el-input>
          </el-form-item>
          <el-form-item label="申请人Id">
            <el-input v-model="form2.userId"></el-input>
          </el-form-item>

          <el-form-item label="会议状态">
            <el-select v-model="form2.state" placeholder="默认审核通过">
              <el-option label="审核通过" value="审核通过" onselect="this"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="会议主题">
            <el-input v-model="form2.conferenceTheme"></el-input>
          </el-form-item>

          <el-form-item label="会议内容">
            <el-input type="textarea" v-model="form2.contentDescription"></el-input>
          </el-form-item>
          <el-form-item label="开会地点">
            <el-input v-model="form2.address"></el-input>
          </el-form-item>

          <el-form-item label="开始时间">
            <el-date-picker clearable style="width:220px"
                            v-model="form2.startTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间时间">
            <el-date-picker clearable style="width:220px"
                            v-model="form2.endTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择结束时间">
            </el-date-picker>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit"> 提交</el-button>
        </div>
      </el-dialog>

<!--      修改会议的弹框-->
      <el-dialog title="会议信息" :visible.sync="outerVisible" width="980px">
        <el-form size="mini" :inline="true" :model="form" ref="form">
          <el-form-item label="会议主题">
            <el-input
                    style="width: 220px"
                    v-model="form.conferenceTheme"
                    autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="会议内容">
            <el-input
                    style="width: 220px"
                    v-model="form.contentDescription"
                    autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="开会的地方">
            <el-input
                    style="width: 220px"
                    v-model="form.address"
                    autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="开始时间">
            <el-date-picker clearable style="width:220px"
                            v-model="form.startTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间时间">
            <el-date-picker clearable style="width:220px"
                            v-model="form.endTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择结束时间">
            </el-date-picker>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="tijiao"> 提交</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>

  import request from "../../utils/request";

  export default {
    name: "Apply",
    data() {
      return {
        //表格数据
        tableData: [],
        //分页数据
        total:0,
        pageNum:1,
        pageSize:5,
        //对搜索框参数的数据绑定
        userName:"",
        address:"",
        outerVisible: false,
        outerVisible2: false,
        form:{},
        form2:{},
        multipleSelection:[],

      }
    },
    created() {
      //调用请求的方法
      this.load();
    },

    methods:{
      //删除的方法
      del(meetingId){
        request.delete("meeting/" + meetingId).then(res =>{
          if (res){
            //提示成功
            this.$message.success("成功");
            //刷新
            this.load();
          }else {
            this.$message.error("失败!");
          }

        })
      },
      //批量删除
      delBatch(){
        let ids = this.multipleSelection.map(v =>v.meetingId)
        request.post("meeting/del/batch" , ids).then(res =>{
          if (res){
            //提示成功
            this.$message.success("批量删除成功");
            //刷新
            this.load();
          }else {
            this.$message.error("批量删除失败!请新增需要删除的数据");
          }
        })
      },
      //编辑
      handleEdit(row){
        this.form = row;
        //打开弹框
        this.outerVisible = true;
      },
      //封装请求的方法
      load(){
        request.get("meeting/findPage",{
          params: {
            pageNum : this.pageNum,
            pageSize : this.pageSize,
            user_name : this.userName,
            address : this.address
          }
        }).then(res=>{
          //把传回来的值给tableData
          this.tableData = res.dada;
          //total
          this.total = res.total;
        })
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        //参数改变以后重新调用请求的方法
        this.load();
      },
      handleCurrentChange(pageNum){
        this.pageNum = pageNum;
        //参数发生改变以后重新请求方法
        this.load();
      },
      //清空表单数据
      clear(){
        this.userName="";
        this.address="";
        //刷新
        this.load()
      },
      //新增会议打开弹框
      addMeeting(){
        //把浏览器的用户信息提取出来
        var UserJsonStr = sessionStorage.getItem("user")
        //转化为json
        var userEntiy = JSON.parse(UserJsonStr)
        //拿到用户名和对应的Id
        this.form2.username = userEntiy.userName
        this.form2.userId = userEntiy.userId
        //单击新增用户打开弹框
        this.outerVisible2 = true;
      },
      daochu(){
        window.open("http://localhost:8848/meeting/export")
      },
      //表单提交
      tijiao(){
        request.post("meeting/insertOrUpdate",this.form).then(res =>{
          //如果新增成功
          if (res){
            //提升新增成功
            this.$message.success("成功");
            //关闭弹框
            this.outerVisible = false;
            //刷新
            this.load();
          }else {
            this.$message.error("失败!请仔细核对信息!");
            //关闭弹框
            this.outerVisible = false;
          }
        })
      },
      //获得批量删除的id
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      onSubmit() {
        request.post("meeting/insertOrUpdate",this.form2).then(res =>{
          if (res){
            this.$message.success("会议申请成功,当前会议可以开始了");
            this.outerVisible2 = false;
          }else {
            this.$message.error("出错了!请检查网络以后再试一次");
            this.outerVisible2 = false;
          }
        })
      }
    }
  };
</script>

<style scoped lang="less">
</style>
